import { ref, onMounted } from 'vue';
import $ from 'jquery';

export function useSnakeLine() {
  const colNum = ref(0);
  const rowNum = ref(0);
  const data = ref([
    {
      index: 0,
      code: 1,
      title: "二、工序1",
      status: -1,
    },
    {
      index: 1,
      code: 2,
      title: "二、工序2",
      status: -1,
    },
    {
      index: 2,
      code: 3,
      title: "三、工序3",
      status: -1,
    },
    {
      index: 3,
      code: 4,
      title: "四、工序4",
      status: -1,
    },
    {
      index: 4,
      code: 5,
      title: "五、工序5",
      status: -1,
    },
    {
      index: 5,
      code: 6,
      title: "六、工序6",
      status: -1,
    },
    {
      index: 6,
      code: 7,
      title: "七、工序7",
      status: -1,
    },
    {
      index: 7,
      code: 8,
      title: "八、工序8",
      status: -1,
    },
    {
      index: 8,
      code: 9,
      title: "九、工序9",
      status: -1,
    },
    {
      index: 9,
      code: 10,
      title: "十、工序10",
      status: -1,
    },
    {
      index: 10,
      code: 11,
      title: "十一、工序11",
      status: -1,
    },
  ]);

  const snckData = ref([]);

  const initSnckLine = () => {
    calColNum();
    if (colNum.value > 0 && data.value.length > 0) {
      calRowNum();
    }
  };
  /**
       * 计算一行显示的列数
       */
  const calColNum = () => {
    colNum.value = Math.floor(($('.main-snakLine').width() - 228) / 240);

  };
  /**
       * 计算需要多少行显示完
       */
  const calRowNum = () => {
    const length = data.value.length;
    if (colNum.value > length) {
      rowNum.value = 1;
    } else {
      rowNum.value = Math.floor(length / colNum.value);
      if (length % colNum.value > 0) {
        rowNum.value++;
      }
    }
    initsSnckData();
  };
  /**
       * 初始化蛇形展示数据
       * 得到一个二位数组
       */
  const initsSnckData = () => {
    const newArr = [];
    if (rowNum.value === 1) {
      newArr.push(data.value);
    } else {
      for (let i = 0; i < data.value.length; i += colNum.value) {
        const arr = data.value.slice(i, i + colNum.value);
        newArr.push(arr);
      }
    }
    if (newArr.length > 0) {
      newArr.forEach((item, index) => {
        newArr[index] = getRowData(item, index);
      });
    }
    snckData.value = newArr;
  };

  const getRowData = (data, index) => {
    return index % 2 === 0 ? data : data.reverse();
  };

  const getWczt = (ztdm) => {
    let className = '';
    switch (ztdm) {
      case 0:
        className = 'success';
        break;
      case 1:
        className = 'proceed';
        break;
      case 2:
        className = 'danger';
        break;
      case 3:
        className = 'await';
        break;
    }
    return className;
  };



  return {
    colNum,
    rowNum,
    data,
    snckData,
    getWczt,
    initSnckLine
  };
}
